﻿import React, {useState} from "react";

function Forms(){
    const [name,setName] = useState("");
    const [headingText,setHeading] = useState("");

    function handleChange(event){
        console.log(event.target.value);
        setName(event.target.value);
    }

    function handleClick(){
        setHeading(name);
    }

    return(
        <div className={"container"}>
            <h1>hello {headingText}</h1>
            <form onSubmit={handleClick}>
                <input onChange={handleChange}
                       type="text"
                       placeholder={"what's your name?"}
                       value={name}
                />
                <button type={"submit"}>Submit</button>
            </form>
        </div>
    )
}

export default Forms;